<template>
  <view class="page_box">
    <view v-if="ArShow">
      <web-view :src="arWeb"></web-view>
    </view>
    <register-widget ref="registerWidgetRef" location="litha-ar" @finish="onRegisterWidgetFinish" />
  </view>
</template>

<script>
  import registerWidget from "@/components/register/register-widget.vue"
  import {
    USER_INFO,
    CUSTOMER_INFO,
  } from '@/utils/constant';
  export default {
    components: {
      registerWidget
    },
    data() {
      return {
        ArShow: false,
        openid: '',
        arWeb: "",
        arUrl: "https://litha-ar.emacallan.com/index.html", //  AR正式环境
        // arUrl: "https://litha-ar.emacallan.com/test/", //  AR测试环境
      }
    },
    async onLoad() {
      let params = {
        path: '/pages/litha-launch/ar/index',
        pageName: 'ar页面',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })

      // 神策埋点
      this.$commonSensors.lithaTrack.crTrack("LandingPageView", {
        "page_name": "AR落地页",
        "refer_source": "活动页/AR",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "AR"
      })

      let _query = {};
      const customerInfo = uni.getStorageSync(CUSTOMER_INFO);
      if (customerInfo && customerInfo.openId) {
        _query = {
          openid: customerInfo.openId,
          unionid: customerInfo.unionId
        }
      } else {
        try{
          await this.$commonFunction.commonLoginNew();
          const customer = uni.getStorageSync(CUSTOMER_INFO);
          _query = {
            openid: customer.openId,
            unionid: customer.unionId
          }
        }catch(err){
          console.log("登录错误", err)
        }
      }
      // 组装ar页面的埋点数据
      let _member = this.$commonSensors.lithaTrack.memberInfo();
      if(_member && typeof _member === 'object' && _member !== null){
        _query = Object.assign({}, _query, _member);
      }
      const _pathQuery = getApp().globalData.pathOptions || "";
      if(_pathQuery && typeof _pathQuery === 'object' && _pathQuery !== null){
        _query = Object.assign({}, _query, _pathQuery);
      }
      const str = this.objectToQuery(_query);

      this.arWeb = this.arUrl + str;
      this.handleMondel()

    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "AR",
        "view_progress": 1
      })
    },
    methods: {
      objectToQuery(obj) {
      	obj = arguments[0];
      	let prefix = arguments[1];
      	if (typeof obj !== "object") return "";
      	const attrs = Object.keys(obj);
      	return attrs.reduce((query, attr, index) => {
      		// 判断是否是第一层第一个循环
      		if (index === 0 && !prefix) query += "?";
      		if (typeof obj[attr] === "object") {
      			const subPrefix = prefix ? `${prefix}[${attr}]` : attr;
      			query += this.objectToQuery(obj[attr], subPrefix);
      		} else {
      			if (prefix) {
      				query += `${prefix}[${attr}]=${obj[attr]}`;
      			} else {
      				query += `${attr}=${obj[attr]}`;
      			}
      		}
      		// 判断是否是第一层最后一个循环
      		if (index !== attrs.length - 1) query += "&";
      		return query;
      	}, "");
      },
      handleMondel() {
        const sdkModel = uni.getStorageSync('KEY_SDK_MODAL');
        const ageModel = uni.getStorageSync('KEY_AGE_MODAL');
        if (sdkModel && ageModel) {
          this.ArShow = true
        }
      },
      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/ARshare.png'
        let path = '/pages/litha-launch/ar/index'
        let title = '体验全新麦卡伦AR空间，邂逅专属新生风味寄语'
        this.$commonSensors.sensorsPageShare();
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				this.$sr.setContext({ share_title: '体验全新麦卡伦AR空间，邂逅专属新生风味寄语' });
        return {
          title: '体验全新麦卡伦AR空间，邂逅专属新生风味寄语',
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/litha-index/ARshare.png'
        };
      },

      /** 18岁弹窗确认 */
      onRegisterWidgetFinish(e) {
        this.finish = true
        const customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const userInfo = uni.getStorageSync(USER_INFO);
        this.handleMondel()
      },
    }
  }
</script>

<style>
  .page_box {
    width: 100vw;
    height: 100vh;
    background-image: url('https://100000063-1252208446.file.myqcloud.com/images/litha/space/AR-bg.png');
    background-size: 100% 100%;
  }
</style>
